<template>
  <div class="tpl-container">
    <div class="mb20 condition-container">
      <div class="condition">
        <span class="color_494949 ft12 pr5">{{ translate('设备号') }}：</span>
        <ElInput
          v-model="ClientId"
          class="w164 mr14"
          :placeholder="translate('请输入设备号')"
        />
      </div>
      <div class="condition">
        <span class="color_494949 ft12 pr5">{{ translate('业务主题') }}：</span>
        <ElInput
          v-model="PayLoadTopic"
          class="w164"
          :placeholder="translate('请输入业务主题')"
        />
      </div>
      <div class="condition">
        <span class="color_494949 ft12 pr5">{{ translate('日期') }}：</span>
        <!-- <el-date-picker
          v-model="date"
          format="YYYY/MM"
          placeholder="请选择月份"
          type="month"
          value-format="YYYY-MM"
        /> -->
        <el-date-picker
          v-model="date"
          :end-placeholder="translate('结束日期')"
          range-separator="To"
          :start-placeholder="translate('开始日期')"
          type="daterange"
          value-format="YYYY-MM-DD"
        />
      </div>
      <div class="condition">
        <ElButton class="settingBtn" type="primary" @click="search">
          {{ translate('查询') }}
        </ElButton>
      </div>
    </div>
    <div class="table">
      <ElTable
        ref="multipleTableRef"
        v-loading="loading"
        :border="true"
        :data="tableData"
      >
        <ElTableColumn
          :label="translate('设备号')"
          prop="ClientId"
          width="auto"
        />
        <ElTableColumn
          :label="translate('业务主题')"
          prop="PayLoadTopic"
          width="auto"
        />
        <ElTableColumn
          :label="translate('请求地址')"
          prop="APIUrl"
          width="auto"
        />
        <ElTableColumn align="center" :label="translate('内容')" width="100">
          <template #default="{ row }">
            <div>
              <ElButton size="small" plain type="primary" @click="showDialog(row)">
                {{ translate('详情') }} {{ row.content }}
              </ElButton>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn align="center" :label="translate('MQ回调')" width="auto">
          <template #default="{ row }">
            <div :class="row.Code01 === '0' ? 'color_l' : 'color_red'">
              {{ row.Code01 === '0' ? '成功' : '失败' }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center"
          :label="translate('设备回调')"
          width="auto"
        >
          <template #default="{ row }">
            <div>
              {{ row.Code ? (row.Code == '0' ? '成功' : '失败') : '推送中' }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn
          :label="translate('请求日期')"
          prop="CreateDate"
          width="auto"
        />
      </ElTable>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="searchInfo.pageNo"
          :layout="layout"
          :page-size="searchInfo.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <Dialog
      :data="detail"
      :visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { APILogGetPageData } from '@/api/mupro'
  import Dialog from './components/dialog.vue'
  import { translate } from '@/i18n'
  const ClientId = ref('')
  const PayLoadTopic = ref('')
  const date = ref('')
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"ClientId","value":${ClientId.value},"displayType":"like"}, {"name":"PayLoadTopic","value":${PayLoadTopic.value},"displayType":"like"}]`,
    export: false,
    value: '',
    date: ['', ''],
  })
  const loading = ref(false)

  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    const { data } = await APILogGetPageData(searchInfo)
    loading.value = false
    // console.log(data)
    tableData.value = data?.rows || []
    total.value = data?.total || 0
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }

  const search = () => {
    console.log(date.value)
    searchInfo.pageNo = 1
    if (
      ClientId.value.trim() !== '' ||
      PayLoadTopic.value.trim() !== '' ||
      (date.value[0] && date.value[1])
    ) {
      const arr = []
      ClientId.value.trim() !== '' &&
        arr.push({
          name: 'ClientId',
          value: ClientId.value,
          displayType: 'like',
        })
      PayLoadTopic.value.trim() !== '' &&
        arr.push({
          name: 'PayLoadTopic',
          value: PayLoadTopic.value,
          displayType: 'like',
        })
      if (date.value[0] && date.value[1]) {
        arr.push(
          {
            name: 'CreateDate',
            value: date.value[0],
            displayType: 'ThanOrEqual',
          },
          {
            name: 'CreateDate',
            value: date.value[1],
            displayType: 'LessThan0rEqual',
          }
        )
      }
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"ClientId","value": '',"displayType":"like"}, {"name":"PayLoadTopic","value": '',"displayType":"like"}]`
    }
    // searchInfo.date = date.value
    gettableData()
  }

  const dialogVisible = ref(false)
  const detail: any = ref({})
  const showDialog = (row: any) => {
    detail.value = row
    dialogVisible.value = true
  }
  const handleConfirm = () => {
    dialogVisible.value = false
  }
  const handleClose = () => {
    dialogVisible.value = false
  }
</script>

<style lang="scss" scoped>
  .tpl-container {
    .color_494949 {
      color: #494949;
    }

    .noData {
      text-align: center;
      font-size: 16px;
      color: gray;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }

    .img-container {
      display: flex;
      // justify-content: center;

      .img {
        width: 100px;
      }
    }
    .color_l {
      color: #67c23a;
    }
    .color_red {
      color: #f56c6c;
    }

    .condition-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .condition {
        margin-right: 14px;
        margin-bottom: 10px;
      }
    }
  }
  .el-table {
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>
